<!--
 * @Author: wjc
 * @Date: 2025-09-09 09:53:22
 * @LastEditors: wjc
 * @LastEditTime: 2025-11-06 17:19:56
 * @Description: 
-->
<template>
  <header class="header">
    <div class="flex items-center">
      <Logo :src="logo" :logo-size="120" fit="contain" />
      <Refresh />
    </div>
    <div class="flex h-full min-w-0 flex-shrink-0 items-center">
      <Notification
        :dot="showDot"
        :notifications="notifications"
        @clear="handleNoticeClear"
        @make-all="handleMakeAll"
      />
      <Language />
      <Theme />
      <FullScreen />
      <User
        :text="userStore.userInfo?.real_name || '用户'"
        avatar="https://wy.huiguanjia.cn/9ad134a361f8d778/file/images/936952704248143872"
        @logout="onLogout"
      />
    </div>
  </header>
</template>

<script setup lang="ts">
  import Notification from '#/layouts/basic/components/notification/index.vue'
  import FullScreen from '#/layouts/components/full-screen/index.vue'
  import Language from '#/layouts/components/language/index.vue'
  import Logo from '#/layouts/components/logo/index.vue'
  import Refresh from '#/layouts/components/refresh/index.vue'
  import Theme from '#/layouts/components/theme/index.vue'
  import User from '#/layouts/components/user/index.vue'
  import { useUserStore } from '#/stores/modules'

  import logo from '@/assets/images/logo.png'

  defineOptions({ name: 'BasicLayoutHeader' })

  const userStore = useUserStore()

  const showDot = computed(() => notifications.value.some((item) => !item.isRead))
  const notifications = ref<any[]>([
    {
      avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
      date: '3小时前',
      isRead: true,
      message: '描述信息描述信息描述信息',
      title: '收到了 14 份新周报',
    },
    {
      avatar: 'https://avatar.vercel.sh/1',
      date: '刚刚',
      isRead: false,
      message: '描述信息描述信息描述信息',
      title: '朱偏右 回复了你',
    },
    {
      avatar: 'https://avatar.vercel.sh/1',
      date: '2024-01-01',
      isRead: false,
      message: '描述信息描述信息描述信息',
      title: '曲丽丽 评论了你',
    },
    {
      avatar: 'https://avatar.vercel.sh/satori',
      date: '1天前',
      isRead: false,
      message: '描述信息描述信息描述信息',
      title: '代办提醒',
    },
  ])
  function handleNoticeClear() {
    notifications.value = []
  }

  function handleMakeAll() {
    notifications.value.forEach((item) => (item.isRead = true))
  }

  const onLogout = () => {
    userStore.logout()
  }
</script>

<style lang="scss" scoped>
  .header {
    @apply h-50px border-border bg-card flex w-full items-center justify-between border-b px-2 duration-300;
  }
</style>
